<template>
    <mi-form-page @submit="submit" v-loading="edit.loading">
        <el-form :model="edit.info"
                 ref="formRef"
                 :rules="rules">

            <el-form-item prop="title" label="优惠券名称">
                <mi-input v-model="edit.info.title" />
            </el-form-item>

            <el-form-item prop="discount_type" label="折扣类型">
                <mi-radio v-model="edit.info.discount_type" :options="coupon.discountTypeOptions" />
            </el-form-item>

            <el-form-item label="折扣金额" prop="discount_price" v-if="edit.info.discount_type == 1">
                <mi-input-number v-model="edit.info.discount_price" />
            </el-form-item>

            <el-form-item label="折扣率" prop="discount_rate" v-else-if="edit.info.discount_type == 2">
                <mi-input-number v-model="edit.info.discount_rate" />
                <mi-form-aux>折扣率范围 0-100，80代表打8折，0和100都代表不折扣</mi-form-aux>
            </el-form-item>

            <el-form-item label="最低使用金额" prop="min_price">
                <mi-input-number v-model="edit.info.min_price" />
                <mi-form-aux>可使用该优惠券的最低消费金额，0代表不限制</mi-form-aux>
            </el-form-item>

            <el-form-item prop="total_num" label="推广总量">
                <mi-input-number v-model="edit.info.total_num" />
                <mi-form-aux>发放的优惠券总数量，不填或小于0都代表不限制</mi-form-aux>
            </el-form-item>
            <el-form-item label="推广方式">
                <div>
                    <el-form-item prop="get_type">
                        <mi-radio v-model="edit.info.get_type" :options="coupon.getTypeOptions" />
                        <mi-form-aux>领取券需要会员主动领取，发放券只能用于平台自动发放</mi-form-aux>
                    </el-form-item>
                    <el-form-item prop="getLevelIdArr" v-if="edit.info.get_type == 'take'">
                        <mi-form-aux>推广范围</mi-form-aux>
                        <user-level-select multiple v-model="edit.info.getLevelIdArr" />
                        <mi-form-aux>指定可以领取的会员等级</mi-form-aux>
                    </el-form-item>
                </div>
            </el-form-item>

            <el-form-item label="生效时间">
                <div>
                    <el-form-item prop="expire_type" >
                        <mi-radio v-model="edit.info.expire_type" :options="coupon.expireTypeOptions" />
                    </el-form-item>
                    <el-form-item prop="expire_day"  v-if="edit.info.expire_type == 1">
                        <mi-form-aux>有效期</mi-form-aux>
                        <mi-input-number v-model="edit.info.expire_day" />
                        <mi-form-aux>天，领取后自动生效</mi-form-aux>
                    </el-form-item>
                    <el-form-item prop="expire_date" v-if="edit.info.expire_type == 2">
                        <mi-date v-model="edit.info.expire_date"
                                 type="daterange"
                                 start-placeholder="开始日期"
                                 end-placeholder="结束日期"
                                 format="YYYY-MM-DD"
                                 value-format="YYYY-MM-DD"
                        />
                    </el-form-item>
                </div>
            </el-form-item>

            <el-form-item label="适用范围">
                <el-form-item prop="apply_type" >
                    <mi-radio v-model="edit.info.apply_type" :options="coupon.applyTypeOptions" />
                </el-form-item>
                <el-form-item prop="applyGoodsIdArr"  v-if="edit.info.apply_type != 1">
                    <goods-select v-model="edit.info.applyGoodsIdArr" multiple @change="applyGoodsChange">
                        <el-button type="primary">选择商品</el-button>
                    </goods-select>
                    <el-table :data="applyGoods" size="small">
                        <el-table-column prop="image" label="图片">
                            <template #default="{row}">
                                <mi-image :src="row.image" :width="32"></mi-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="title" label="商品名称" />
                    </el-table>
                </el-form-item>
            </el-form-item>

            <el-form-item prop="desc" label="描述">
                <mi-input v-model="edit.info.desc" type="textarea" :rows="3" />
            </el-form-item>

            <el-form-item prop="is_show" label="是否使用">
                <mi-switch v-model="edit.info.is_show" />
            </el-form-item>

        </el-form>
    </mi-form-page>
</template>

<script setup lang="ts">
import {reactive, watch, ref, onBeforeMount, inject} from "vue";
import {makeModelAuth} from "@/utils/auth";
import List from "@/model/list";
import Edit from "@/model/edit";
import {FormInstance} from "element-plus";
import {simpleGet, simplePost} from "@/utils/request";
import GoodsSelect from "@/views/store/components/GoodsSelect.vue";
import coupon from "@/dict/coupon";
import UserLevelSelect from "@/views/site/components/UserLevelSelect.vue";

const formRef = ref<FormInstance>()
const auth = makeModelAuth("store.coupon")
const rules = {
    title:[{required:true, message:'必填'}],
    total_num:[{required:true, message:'必填'}],
    discount_type:[{required:true, message:'必填'}],
    expire_type:[{required:true, message:'必填'}],
    expire_date:[
        {
            validator:(rule:any, value:any, callback:any) => {
                if (edit.info.expire_type==2 && !value){
                    callback(new Error('请填写生效时间'))
                }
                callback()
            }
        }
    ],
}

const list = inject<List>("list")
const edit = inject<Edit>("edit", new Edit({}))
const id = edit.info.id
const applyGoods = ref<any[]>([])

const submit = () => {
    let url = '/' + (id ? auth.edit : auth.add)
    // 处理表单数据
    if (edit.info.expire_type == 2){
        edit.info.start_date = edit.info.expire_date[0]
        edit.info.end_date = edit.info.expire_date[1]
    }

    edit.submit({
        formRef: formRef.value,
        url: url,
        list: list
    })
}

const applyGoodsChange = (rows:any[]) => {
    applyGoods.value = rows
}


onBeforeMount(() => {
    edit.init(async () => {
        if (id){
            // 请求表单数据
            let res = await simpleGet('/' + auth.edit, {id:id})
            edit.info = res.info
        }else{
            edit.info = {
                apply_type: 1,
                is_show:1,
                min_price:0,
            }
        }
    })
})

</script>

<style scoped>

</style>
